<template>
	<view class="filterView">
		<view class="curPort">
			<choosePortComponent @changePort="changePort" @toPortSelect="toPortSelect" @closePortPopup="closePortPopup"></choosePortComponent>
		</view>
		<view class="chooseMaterial" @click="chooseMaterial">
			<view class="chooseMaterial-title">{{curMaterial[1] ? curMaterial[1].name : "全部物料"}} </view>
			<u-icon class="chooseMaterial-downImage" name="arrow-down-fill" color="#4EAAE6" size="14">
			</u-icon>
		</view>

		<!-- 物料选择弹框 -->
		<view>
			<u-select v-model="isMaterialPickerShow" 
			:default-value="selecteDefaultValue" value-name="pkid" label-name="name" child-name="material"
				:list="materialStyleList" mode="mutil-column-auto" cancel-color="#CECECE" confirm-color="#4EAAE6"
				@confirm="changeMaterialType"></u-select>
		</view>
	</view>
</template>

<script>
	import choosePortComponent from './choosePortComponent.vue'
	export default {
		name: "materialFilterView",
		components:{
			choosePortComponent
		},
		data() {
			return {
				//当前选中的港口
				curPort: {},
				//当前选中的物料
				curMaterial: [],
				//物料选择弹框是否显示
				isMaterialPickerShow: false,
				//物料选择框初始值
				selecteDefaultValue: [],
				//物料类型列表
				materialStyleList: [],
			};
		},
		created() {
			this.requesMaterialTypeList(false);
		},
		methods: {
			//切换港口的回调
			changePort(newPort) {
				this.curPort = newPort;
				// 发送事件给父组件
				this.$emit('changePort', newPort);
			},
			
			//跳转到港口选择页面
			toPortSelect() {
				// 发送事件给父组件
				this.$emit('toPortSelect');
			},
			
			closePortPopup() {
				// 发送事件给父组件
				this.$emit('closePortPopup');
			},
			
			//选择物料类型
			chooseMaterial() {
				if (this.materialStyleList.length == 0) {
					this.requesMaterialTypeList(true);
				} else {
					this.isMaterialPickerShow = true;
				}
			}, 

			//切换选中的物料类型
			changeMaterialType(e) {
				//处理选中的物料
				let result = [];
				this.selecteDefaultValue = [];
				for (let i = 0; i < e.length; i++) {
					let item = e[i];
					let newItem = {};
					newItem.name = item.label;
					newItem.pkid = item.value;
					result.push(newItem);
					
					if (i == 0) {
						for (let j = 0; j < this.materialStyleList.length; j++) {
							let firstItem = this.materialStyleList[j];
							if(firstItem.pkid === newItem.pkid) {
								this.selecteDefaultValue.push(j)
							}
						}
					} else if (i == 1) {
						let firstItem = this.materialStyleList[this.selecteDefaultValue[0]];
						for (let k = 0; k < firstItem.material.length; k++) {
							let secondeItem = firstItem.material[k];
							if(secondeItem.pkid === newItem.pkid) {
								this.selecteDefaultValue.push(k)
							}
						}
					}
				}
				console.log(this.selecteDefaultValue);
				this.curMaterial = result;
				// 发送事件给父组件
				this.$emit('changeMaterialType', result);
			},

			//获取物料类型列表
			//isShowSelect: 请求成功后是否显示select
			requesMaterialTypeList(isShowSelect) {
				this.$u.api.requesMaterialTypeList().then(res => {
					this.materialStyleList = res;
					if (isShowSelect) {
						this.isMaterialPickerShow = true;
					}
				}).catch(err => {
					console.log(err)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.filterView {
		height: 80rpx;
		padding: 20rpx 30rpx;
	}

	.curPort {
		float: left;
	}

	.chooseMaterial {
		float: right;
		height: 40rpx;
		line-height: 40rpx;
		border: 1rpx solid #4EAAE6;
		border-radius: 10rpx;
		padding-left: 23rpx;
		padding-right: 23rpx;
	}

	.chooseMaterial-title {
		line-height: 40rpx;
		float: left;
		font-size: 22rpx;
		color: #333333;
	}

	.chooseMaterial-downImage {
		margin-left: 10rpx;
	}
</style>
